<template>
  <div>
    <headnav>购物车</headnav>
    <section class="shopcart-page">
      <div class="shopcart-list">
        <pro></pro>
      </div>
      <section class="recommend">
        <div class="recommend-title">
          <van-divider
            :style="{
              borderColor: '#ccc',
              padding: '0 16px',
              margin: '20px 0',
            }"
            >可能你还想要</van-divider
          >
        </div>
        <recommend></recommend>
      </section>
      <van-submit-bar :price="$store.getters.getAllPrice*100" button-text="提交订单">
        <van-checkbox   @click="allcheckchange"
        :value="$store.getters.getallChecked" checked-color="#ee0a24"
          >全选</van-checkbox
        >
      </van-submit-bar>
      <tabbar :active="2"></tabbar>
    </section>
  </div>
</template>
<script>
import tabbar from "../../components/tabBar.vue";
import headnav from "../../components/headnav.vue";
import recommend from "../../components/recommend.vue";
import pro from "./mainpro.vue";
export default {
  data() {
    return {
      price: "",
    };
  },
  components: {
    tabbar,
    headnav,
    pro,
    recommend,
  },
  methods: {
    allcheckchange(){
      this.$store.dispatch("allcheckChange")
    }
  },
};
</script>

<style lang="scss" scoped>
.shopcart-page {
  margin-top: 100px;
  background-color: #f7f7f7;

  .pro {
    background-color: #fff;
    font-size: 36px;
  }
}

.van-submit-bar {
  bottom: 100px;
}

.recommend {
  margin-bottom: 100px;
  background-color: #fff;
  .recommend-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;

    .recommend-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #dcdcdc;

      &:nth-child(2n-1) {
        border-right: 1px solid #dcdcdc;
      }

      img {
        width: 100%;
        height: 290px;
        margin: 0 auto;
      }

      p {
        height: 60px;
        padding: 20px 0;
        font-size: 26px;
        line-height: 40px;
        color: #333;
        overflow: hidden;
      }

      i {
        font-style: normal;
        font-size: 32px;
        color: red;
      }
    }
  }
}
</style>